<!-- ContentText.vue -->
<template>
    <div class="text-block">
      <div v-if="block.format === 'markdown'" v-html="safeMarkdown(block.data)" />
      <div v-else class="plain-text">
        {{ block.data }}
      </div>
    </div>
  </template>
  
  <script setup>
  import { marked } from 'marked'
  import DOMPurify from 'dompurify'
  
  const props = defineProps({
    block: {
      type: Object,
      required: true,
      validator: (b) => !!b.data && b.type === 'text'
    }
  })
  
  const safeMarkdown = (text) => {
    return DOMPurify.sanitize(marked.parse(text))
  }
  </script>
  
  <style scoped>
  .text-block {
    font-size: 16px;
    line-height: 1.8;
  }
  
  .plain-text {
    white-space: pre-wrap;
  }
  </style>